import { Component } from 'react'
import { View, Button, Text } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import './index.scss'

function Index(props) {
  const increment = () => {
    const { counterStore } = props.store
    counterStore.increment()
  }
  const decrement = () => {
    const { counterStore } = props.store
    counterStore.decrement()
  }
  const incrementAsync = () => {
    const { counterStore } = props.store
    counterStore.incrementAsync()
  }
  const { counterStore: { counter } } = props.store;
  return (
    <View className='index'>
      {/* 在React中，组件名必须大写 */}
      <View>我是一个孤独的DIV 666</View>
      <Button onClick={increment}>+</Button>
      <Button onClick={decrement}>-</Button>
      <Button onClick={incrementAsync}>Add Async</Button>
      <Text>{counter}</Text>
    </View>
  )
}
// 上面的装饰器的写法等价于下面的写法
export default inject('store')(observer(Index))
